<template>
    <div class="dianping flex_column" style="height:100%;background:#f6f6f6;margin-bottom:0">
        <header >
            <a @click="$api.goBack()" class="back"></a>
            <span >发表评价</span>
            <a  @click="addPingjia" class="add">发布</a>
        </header>
        <div class="row flex" style="padding-right:0.3rem;margin-bottom:0.3rem;padding-bottom:0.3333rem;" >
            <div class="classroom">
                <div class="className" v-if="detail.patternName" >{{detail.patternName}}</div>
                <div class="teacher" v-if="detail.remark" >{{detail.remark}}</div>
            </div>
            <div class="right flex_column" style="flex-grow: 1" >
                <div class="price">
                    ￥{{detail.patternPrice.toFixed(2)}}
                </div>
            </div>                
        </div>
        <div class="wrap">
            <div class="row flex " v-for="(item,index) in biaoxian">
                <div class="left" style="margin-right:0.3467rem;">{{item.title}}<span class="red">*</span></div>
                <div class="center start_wrap">
                    <div @click="pingfen(n,item.field)" v-for="n in detail[item.field]" class="start1"></div>
                    <div @click="pingfen(detail[item.field]+n,item.field)" v-for="n in (5-detail[item.field])" class="start2"></div>
                </div>
                <div class="right" style="flex-grow:1;text-align:right;">
                    <span :class="{red:detail[item.field]>=4,gray:detail[item.field]==1}">{{formatterPingjia(detail[item.field])}}</span>
                </div>
            </div>
            <div class="main row" >
                <div class="textarea_wrap" style="width:100%;padding:0;">
                    <textarea @change="changeValue" placeholder="请在此处填写你的点评内容,最多500字"
                        v-model="detail.bodyComment" rows="4"></textarea>
                </div>
            </div>
            <div class="main row" style="padding-bottom:0.3333rem;"><mt-switch v-model="anonymous">匿名</mt-switch></div>
        </div>
        
        
    </div>

</template>
<script>
    import {
        MessageBox
    } from 'mint-ui'
    import getImage from '../components/getImage.vue'
    export default {
        name: "footShow",
        data() {
            return {
                useInfo: {},
                anonymous: false, //是否匿名
                detail: {
                    patternPrice: '',
                    schoolLevel: 0,
                    teachLevel: 0,
                    serviceLevel: 0,
                },
                sheetVisible: false,
                url: 'servicePatternCommentInfo/save', //用来存储点评的接口
                biaoxian: [{
                    title: "校区环境",
                    field: 'schoolLevel'
                }, {
                    title: "教学水平",
                    field: 'teachLevel'
                }, {
                    title: "服务态度",
                    field: 'serviceLevel'
                }],
            };
        },
        methods: {

            changeValue() {
                sessionStorage.setItem('dianpingDetail', JSON.stringify(this.detail));
            },
            getUseInfo() {
                this.useInfo = JSON.parse(sessionStorage.getItem('useInfo'));
            },
            getDetail() {
                let detail = JSON.parse(sessionStorage.getItem('serviceDetail'));
                detail.schoolLevel = 0;
                detail.teachLevel = 0;
                detail.serviceLevel = 0;
                console.log(JSON.parse(sessionStorage.getItem('serviceDetail')));
                this.detail = detail;
            },
            addPingjia() { //发布评价
                var url = this.url;
                var params = JSON.parse(JSON.stringify(this.detail))
                params.userId = this.useInfo.userId
                params.anonymity = this.anonymous ? 1 : 0
                delete params.endTime;
                delete params.createTime;
                this.$api.post(url, params, (data) => {
                    this.$api.clearItem('studentType'); //清除 除了userInfo和studentType外所有缓存数据
                    MessageBox('提示', '提交成功');
                    this.$api.goBack();
                })
            },
            pingfen(index, field) {
                console.log(index, field);
                this.detail[field] = index;
            },
            formatterPingjia(pingfen) {
                switch (pingfen) {
                    case 5:
                        return "非常好";
                        break;
                    case 4:
                        return "好";
                        break;
                    case 3:
                        return "一般";
                        break;
                    case 2:
                        return "差";
                        break;
                    case 1:
                        return "非常差";
                        break;
                }
            }
        },
        created() {
            this.getUseInfo();
            this.getDetail();
        }
    }
</script>
<style scoped>
    .price {
        color: #FC5F51;
        text-align: right;
        font-size: 0.42333rem;
        padding-right: 0.13334rem;
        font-weight: bold;
    }
    
    .button_wrap {
        margin-top: 0.05rem;
        text-align: right;
    }
    
    .wrap {
        flex-grow: 1;
        background: white;
    }
    
    .footer {
        height: 1.37333rem;
    }
    
    .select_class {
        padding: 0 0.34333rem;
    }
    
    .radio_right {
        height: 3rem;
        margin-top: 0.24666rem;
        margin-bottom: 0.1rem;
    }
    
    .footer .left {
        font-size: 0.38666rem;
        width: 7.22666rem;
        font-weight: bold;
        color: #010101;
        height: 100%;
        text-align: right;
        padding-right: 0.88rem;
        line-height: 1.37333rem;
    }
    
    .footer .right {
        flex-grow: 1;
        height: 100%;
    }
    
    .select_class .mint-navbar {
        background: white;
        color: #A5A5A5;
    }
    
    .pattern_status {
        text-align: right;
        color: #CC6600;
        font-size: 0.426333rem;
    }
    
    .select_class .mint-navbar .mint-tab-item.is-selected {
        border-bottom: 0.1rem solid #74beff;
        color: #0489ff;
        margin-bottom: 0px;
    }
    
    .classroom {
        padding-left: 0;
    }
    
    .topay {
        height: 100%;
        border: none;
        outline: none;
        font-size: 0.37333rem;
        color: white;
        background: #048Aff;
        width: 100%;
    }
</style>